<template>
    <div style="width: 100%;margin: 10px auto;">
        <div class="operation" >
        <el-row type="flex" class="row-bg" justify="start">
            <el-input placeholder="请输入医生名" prefix-icon="el-icon-search"
                      clearable @clear="initData" style="width: 450px;margin-right: 10px"
                      v-model="keyword" @keydown.enter.native="search"
            ></el-input>
            <el-button icon="el-icon-search" type="primary" @click="search">
                搜索
            </el-button>
            <el-col >
                <el-button type="primary" icon="el-icon-plus"  @click="addDepAction">
                    添加医生</el-button>
            </el-col>
        </el-row>
        </div>
        <el-table
                :header-cell-style="{background:'#c3e0cd',color:'#606266'}"
                :fit="true"
                :data="doctor"
                border
                style="margin: 15px">
            <el-table-column
                    type="selection"
                    >
            </el-table-column>
            <el-table-column
                    fixed
                    prop="id"
                    label="用户id"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="roleName"
                    label="角色"
                    min-width="80">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="职称"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄"
                    min-width="50">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    prop="departmentName"
                    label="所属科室"
                    min-width="120">
            </el-table-column>
            <el-table-column
                    prop="passward"
                    label="密码"
                    v-if="false"
                    >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    min-width="170">
                <template slot-scope="scope">
                    <el-button @click="deleteClick(scope.row)" type="danger" round size="small">删除</el-button>
                    <el-button @click="editData(scope.row)" type="primary" round size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form :model="form" :rules="rules">

                <el-form-item label="用户id" :label-width="formLabelWidth"  prop="id">
                    <el-input v-model="form.id" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="用户名字" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" :label-width="formLabelWidth" prop="passward">
                    <el-input v-model="form.passward" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户职称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属角色" :label-width="formLabelWidth">
                    <el-select v-model="form.role" :placeholder="form.departmentName">
                        <el-option v-for = "(item,index) in roles" :label="item" :value="index"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="所属科室" :label-width="formLabelWidth">
                    <el-select v-model="form.departmentName" :placeholder="form.departmentName">
                        <el-option v-for = "item in departments" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="pushData">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="50%">
            <el-form :model="form">

                    <el-form-item label="用户id" :label-width="formLabelWidth"  >
                        <el-input v-model="form.id" autocomplete="off" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名字" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户职称" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户年龄" :label-width="formLabelWidth">
                        <el-input v-model="form.age" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input v-model="form.passward" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="所属角色" :label-width="formLabelWidth">
                         <el-select v-model="form.role" :placeholder="form.departmentName">
                            <el-option v-for = "(item,index) in roles" :label="item" :value="index"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属科室" :label-width="formLabelWidth">
                        <el-select v-model="form.departmentName" :placeholder="form.departmentName">
                            <el-option v-for = "item in departments" :label="item.name" :value="item.name"></el-option>

                        </el-select>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="pushEditData">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import MY from "../../global_variable";

    export default {
        name: "Doctor",
        data(){
            return {
                keyword:'',
                doctor:[],
                departments:[],
                roles:['暂无','管理员','医生','护士'],
                dialogVisible:false,
                editDialogVisible:false,
                formLabelWidth: '120px',
                form:{
                    id:'',
                    name:'',
                    title:'',
                    age:'',
                    email:'',
                    departmentName:'',
                    phone:'',
                    passward:'',
                    role:0

                },
                rules: {
                    id: [
                        {required: true, message: '请输入医生身份证作为id', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3到 20个字符', trigger: 'blur'}
                    ],
                    passward: [
                        {required: true, message: '请输入登陆密码', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3到 20个字符', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入医生姓名', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur'}
                    ],
                    title:[
                        {required: true, message: '请输入医生职称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20个字符', trigger: 'blur'}
                    ],
                    age:[
                        {required: true, message: '请输入医生年龄', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 2的数字', trigger: 'blur'}
                    ],
                },
                total:0,
                currentPage:1,
                pageSize:5,
                doctors:[]
            }
        },
        mounted(){
            this.initData()
        },
        methods:{
            search(){
                var pn={
                    name:this.keyword
                }
                console.log('--------------')
                this.getRequest(MY.myURL+'/doctor/fuzzyQueryByDoctorName',pn).then(resp=>{
                    console.log(resp)
                    if(resp.data.code=='4010'){
                        this.doctors=resp.data.data
                        this.total=this.doctors.length
                        let begin=0
                        let end=0
                        if(Math.ceil(this.total/this.pageSize)<this.currentPage){
                            begin=0
                            end=this.pageSize
                            this.currentPage=1
                        }else{
                            begin=(this.currentPage-1)*this.pageSize
                            end=(this.currentPage*this.pageSize)
                        }
                        this.doctor=this.doctors.slice(begin,end)
                        for(let i=0;i<this.doctor.length;i++){
                            this.$set(this.doctor[i],'roleName',this.roles[this.doctor[i].role])
                        }
                        console.log(this.doctor)
                    }
                })
            },
            pushData(){
                console.log(this.form)
                if(this.form.departmentName==''){
                    this.$message({
                        message: '医生所属科室: 不能为空',
                        type: 'warning'
                    });
                }else{
                    this.getRequest(MY.myURL+'/doctor/isExist/',{id:this.form.id}).then(resp=>{
                        console.log(resp)
                        if(resp.data.id==this.form.id){
                            this.$message({
                                message: '医生: '+this.form.name+'已经存在',
                                type: 'warning'
                            });
                        }else{
                            this.getRequest(MY.myURL+'/doctor/insertDoctor',this.form).then(resp=>{
                                if(resp.data.code=='4001'){
                                    this.$message({
                                        message: resp.data.message,
                                        type: 'success'
                                    });
                                    this.clearForm()
                                    this.dialogVisible=false
                                    //this.refreshData()
                                    if(this.keyword!=''){
                                        this.search();
                                    }else{
                                        this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)

                                    }
                                    //this.pageRequest(Math.ceil((this.total+1)/this.pageSize),this.pageSize)
                                    //this.currentPage=Math.ceil((this.total+1)/this.pageSize)
                                }
                            })

                        }

                    })
                }


            },
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(1,this.pageSize)
                }
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                if(this.keyword!=''){
                    this.search()
                }else{
                    this.pageRequest(currentPage,this.pageSize)
                }
                console.log(this.currentPage)  //点击第几页
            },
            deleteClick(row){
                console.log(row.name)
                var path = MY.myURL + '/doctor/deleteOneDoctor/'
                this.$confirm('此操作将永久删除医生为 '+row.id+'的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var pn={
                        id:row.id
                    }
                    this.getRequest(path,pn).then(resp => {
                        console.log(2)
                        console.log(resp)
                        console.log(2)
                        if (resp.data.code == '4005') {
                            this.$message({
                                type: 'success',
                                message: resp.data.message
                            });

                            if(this.doctor.length==1){
                                this.pageRequest(this.currentPage-1,this.pageSize)

                            }else{
                                this.pageRequest(this.currentPage,this.pageSize)
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '该医生已有患者关联，暂时不能删除'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            editData(row){
                console.log(row)
                this.editDialogVisible=true
                this.initForm(row)
               this.getRequest(MY.myURL+'/department/getDepartments').then(resp=>{
                   console.log(resp.data.code=='4010')
                   if(resp.data.code=='4010'){
                       console.log(resp)
                       this.departments=resp.data.data
                   }
               })
            },
            pushEditData(){
                this.getRequest(MY.myURL+'/doctor/updateDoctor',this.form).then(resp=>{
                    console.log('更新医生信息')
                    console.log(resp)
                    if(resp.data.code=='4009'){
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.clearForm()
                        //this.refreshData()
                        if(this.doctor.length==1){
                            this.pageRequest(this.currentPage-1,this.pageSize)
                            this.currentPage-=1
                        }else{
                            this.pageRequest(this.currentPage,this.pageSize)
                        }
                    }else{
                        this.$message.error(resp.data.message);
                        this.editDialogVisible=false
                    }
                })
            },
            initData(){

                this.pageRequest(1,5)
            },
            refreshData(){
               this.initData()
            },
            pageRequest(start,size){
                var pn={
                    pageNum:start,
                    pageSize:size
                }
                this.getRequest(MY.myURL+'/doctor/getDoctorByPage',pn).then(resp=>{
                    console.log('分页')
                    console.log(resp)
                    if(resp){
                        this.doctor=resp.data.data.records
                        for(let i=0;i<this.doctor.length;i++){
                            this.$set(this.doctor[i],'roleName',this.roles[this.doctor[i].role])
                        }
                        this.total=resp.data.data.total
                        this.currentPage=pn.pageNum
                    }
                })

            },
            addDepAction(){
                this.dialogVisible=true
                this.clearForm()
                this.getRequest(MY.myURL+'/department/getDepartments').then(resp=>{
                    console.log(resp.data.code=='4010')
                    if(resp.data.code=='4010'){
                        this.departments=resp.data.data
                        console.log(resp)
                    }
                })


            },
            initForm(row){

                this.form.id=row.id
                this.form.name=row.name
                this.form.address=row.address
                this.form.age=row.age
                this.form.email=row.email
                this.form.phone=row.phone
                this.form.title=row.title
                this.form.passward=row.passward
                this.form.role=row.role
                this.form.departmentName=row.departmentName
            },
            clearForm(){
                this.form.id=''
                this.form.name=''
                this.form.address=''
                this.form.age=''
                this.form.email=''
                this.form.phone=''
                this.form.title=''
                this.form.passward=''
                this.form.departmentName=''
                this.form.role=0
                this.editDialogVisible=false
            }
        }
    }
</script>

<style scoped>

</style>
